﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/css/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/css/font-awesome.css" rel="stylesheet" />
    <link href="~/Content/css/bootstrap-table.css" rel="stylesheet" />
    <link href="~/Content/css/toastr.css" rel="stylesheet" />
</head>
<body>
    <!-- 表格（datatable） -->
    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
        <button id="btn_start" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-play" aria-hidden="true"></span>启用
        </button>
        <button id="btn_stop" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pause" aria-hidden="true"></span>暂停
        </button>
    </div>
    <table id="expandabledatatable" data-reorderable-columns="true"></table>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加任务
                    </h4>
                </div>
                <form id="myForm" method="post" class="form-horizontal" action="/Task/AddTask">
                    <div class="modal-body">
                        <input type="hidden" name="Id" id="txt_id" />
                        <div class="form-group">
                            <label class="col-lg-3 control-label">任务名称</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="TaskName" id="txt_takeName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">类名称</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="ClassName" id="txt_className" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">cron表达式</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="CronExpression" id="txt_cron" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">描述</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="Remark" id="txt_cronRemark" />
                            </div>
                        </div>
                        @*<div class="form-group">
                            <div class="col-lg-4 col-sm-4 col-xs-4">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" class="colored-success" checked="checked" id="enabled" name="Allowused" />
                                        <span class="text">启用</span>
                                    </label>
                                </div>
                            </div>
                        </div>*@
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">
                            关闭
                        </button>
                        <button type="submit" class="btn btn-primary" id="btn_submitq1"> 提交</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Content/js/bootstrap.js"></script>
    <script src="~/Content/js/bootstrap-table.js"></script>
    <script src="~/Content/js/bootstrap-table-zh-CN.js"></script>
    <script src="~/Content/js/datatables.init2.js"></script>
    <script src="~/Content/js/bootbox.js"></script>
    <script src="~/Content/js/bootstrapValidator.js"></script>

    <script>
        $(document).ready(function () {
            $("#myForm").bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    TaskName: {
                        validators: {
                            notEmpty: {
                                message: '任务名称不能为空'
                            }
                        }
                    },
                    ClassName: {
                        validators: {
                            notEmpty: {
                                message: '类名称不能为空'
                            }
                        }
                    },
                    CronExpression: {
                        validators: {
                            notEmpty: {
                                message: 'cron表达不能为空'
                            }
                        }
                    }
                },
                submitHandler: function (validator, form, submitButton) {
                    var taskData = {};
                    taskData.Id = $('#txt_id').val();
                    taskData.taskName = $('#txt_takeName').val();
                    taskData.className = $('#txt_className').val();
                    taskData.cronExpression = $('#txt_cron').val();
                    taskData.remark = $('#txt_cronRemark').val();
                    taskData.Allowused = $('#enabled').is(':checked');
                    $.ajax({
                        type: "post",
                        url: "/Task/AddOrEditTask",
                        data: taskData,
                        success: function (data) {
                            bootbox.alert(data, function () {
                                $("#expandabledatatable").bootstrapTable('refresh');
                            });
                            $('#myModal').modal('hide')
                            $('#myForm').data('bootstrapValidator').resetForm(true);
                        }
                    });
                }
            })
        })
    </script>

</body>
</html>
